<div ng-controller="articleCtrl">
	<!-- search & list -->
	<div class="fade-animate" ng-show="mode(['search'])" lazy="search()">
		<!-- list -->
		<div waterfall data="articles" as="art" start="1">
			<a href="#" class="upload-image" ng-click="add()"><b class="glyphicon glyphicon-plus"></b></a>
			<div class="fade-animate waterfall-elem" article="art">
				<a href="#" ng-click="edit(art, n)"><i class="fa fa-pencil"></i> &{'app.common.button.edit'}</a>
				<a href="#" ng-click="del(art, n)"><i class="fa fa-trash"></i> &{'app.common.button.del'}</a>
				<a href="@{Articles.detail}?id={{art.id}}" target="_blank"><i class="fa fa-eye"></i> &{'app.common.button.view'}</a>
			</div>
		</div>
		<!-- /list -->
	</div>
	<!-- /search & data -->
	
	<!-- form -->
	#{include 'Resources/article_form.html' /}
	<!-- /form -->
	
	<!-- pic lib modal -->
	#{include 'Admin/modal.html' /}
	<!-- /pic lib modal -->
</div>

<script type="text/javascript">
'use strict'
var articleCtrl = ['$scope', '$http', function($scope, $http) {
	// 定义方法
	angular.extend($scope, {
		init: function() {
			$scope.mode('search');
		}, btnDisabled: function(form) {
			return (form.$invalid || $scope.btn(['doing']));
		}, search: function() {
			// 初始化当前页号
			if (angular.isUndefined($scope.articles_current)) $scope.articles_current = 1;
			
			// 仅当总页数为空或小于等于当前页数时进行加载数据
			if (angular.isUndefined($scope.articles_total) || $scope.articles_total >= $scope.articles_current) {
				$http({
					method: 'post',
					url: '@{Resources.article_search}',
					data: jQuery.param({page: $scope.articles_current, size: 20}),
					headers: {'Content-Type': 'application/x-www-form-urlencoded'}
				}).success(function(data) {
					$scope.articles = data.content;
					$scope.articles_total = data.totalPage;
					$scope.articles_current = $scope.articles_current + 1;
				});
			}
		}, add: function() {
			$scope.mode('add');
			$scope.btn('wait');
			$scope.article = {};
		}, edit: function(article, n) {
			$scope.mode('add');
			$scope.article = article;
			$scope.waterfall_lane = n;
		}, save: function() {
			$http({
				method: 'post',
				url: '@{Resources.article_save}',
				data: angular.element('#article-data-form').serialize(),
				headers: {'Content-Type': 'application/x-www-form-urlencoded'}
			}).success(function(data) {
				if (angular.isUndefined($scope.waterfall_lane) || !$scope.update(data, $scope.articles_lane[$scope.waterfall_lane])) {
					$scope.articles_lane[1].splice(0, 0, data);
				}
				$scope.mode('search');
			});
		}, del: function(art, idx) {
			$http({
				method: 'get',
				url: '@{Resources.article_delete}?id=' + art.id,
				headers: {'Content-Type': 'application/x-www-form-urlencoded'}
			}).success(function(data) {
				$scope.remove(art, $scope.articles_lane[idx]);
			});
		}, cancel: function() {
			$scope.articles = undefined;
			$scope.articles_current = undefined;
			$scope.articles_total = undefined;
			$scope.mode('search');
		}, modal: function(url) {
			$scope.modalUrl = url;
		}, setArticlePicUrl: function(selected) {
			$scope.article.picUrl = selected.picUrl;
		}
	});
	
	// 初始化
	$scope.init();
}];
</script>
